import React, { Component } from 'react';
import { Tab, Grid, Pagination } from '@icedesign/base';
import IceContainer from '@icedesign/container';
import DataBinder from '@icedesign/data-binder';

import './EInteraction.scss';

const TabPane = Tab.TabPane;
const { Row, Col } = Grid;

@DataBinder({
  QuestionData: {
    url: `${global.constants.GOLDEYEGETHOST}cattle/interactive_list`,
    type: 'get',
    params: {},
    defaultBindingData: {}
  },
  AnswerData: {
    url: `${global.constants.GOLDEYEGETHOST}cattle/interactive_list`,
    type: 'get',
    params: {},
    defaultBindingData: {}
  }
})
export default class EInteraction extends Component {
  static displayName = 'EInteraction';

  constructor(props) {
    super(props);
    this.state = {
      activeKey: localStorage.getItem("tid") ? localStorage.getItem("tid") : 3,
      ques_total: 0,
      answ_total:0,
      ques_current:1,
      answ_current:1,
      page_size: 20,
      page_num: 1,
      ques_data:[],
      answ_data:[],
    };
  }

  componentDidMount() {
    this.getData('question','QuestionData',this.state.page_size,this.state.page_num);
    this.getData('reply','AnswerData',this.state.page_size,this.state.page_num);
    window.onload=function(){
        document.onkeydown=function(){
            var e=window.event||arguments[0];
            if(e.keyCode==123){
                return false;
            }else if((e.ctrlKey)&&(e.shiftKey)&&(e.keyCode==73)){
                return false;
            }
        };
        document.oncontextmenu=function(){
            return false;
        }
    }
  }

  questionHandleChange = (ques_current) => {
    // console.log("current",ques_current)
    this.setState({
      ques_current
    });
    this.getData('question','QuestionData',this.state.page_size,ques_current);
  }

  answerhandleChange = (answ_current) => {
    this.setState({
      answ_current
    });
    this.getData('reply','AnswerData',this.state.page_size,answ_current);
  }

  getData = (type,req,size,num) => {
    this.props.updateBindingData(req,{
      params: {
        type:type,
        page_size:size,
        page_num:num,
        secu_code:GetUrlParam("secu_code")
      }
    }, (data) => {
      if(req === "QuestionData"){
        this.setState({
          ques_data:data.data,
          ques_total:data.total_count
        })
        console.log("QuestionData",data)
      }else{
        this.setState({
          answ_data:data.data,
          answ_total:data.total_count
        })
        console.log("AnswerData",data)
      }
    });
  }

  // stabChange = (key) => {
  //   // console.log("key",key)
  //   // localStorage.setItem("tid",key)
  //   // this.setState({
  //   //   activeKey:key
  //   // })
  //   if(key==0){
  //     window.location.href = `${global.constants.GOLDEYELOCALHOST}gdBeta2/#/tools/marketAnalysis?secu_code=${GetUrlParam("secu_code")}`
  //   }else if(key==1){
  //     // window.location.href = ""
  //   }else if(key==2){
  //     window.location.href = `${global.constants.LOCALHOST}website/list?secu_code=${GetUrlParam("secu_code")}`
  //   }
  // }

  render() {
    return (
      // <div style={{marginTop:'25px'}}>
      //   <Tab prefix="pre-" onChange={this.stabChange.bind(this)} defaultActiveKey={1}>
      //     <TabPane tab="融资融券统计与查询" key={0}>
      //     </TabPane>

      //     <TabPane tab="E互动统计" key={1}>
            <IceContainer style={styler.Row}>
              <Row className="message-total">
                <Col span="12">未回复消息({this.state.ques_total}条)</Col>
                <Col span="12">已回复消息({this.state.answ_total}条)</Col>
              </Row>
              <div className="quesTab">
                <Tab prefix="ques-" defaultActiveKey={0}>
                  <TabPane tab="最新提问" key={0}>
                    {this.state.ques_data.map((ques,index) => {
                      return(
                        <Row className="ques-box" key={index}>
                          {/* <Col span="2" style={styler.Col}><img src={ques.company_img_url} style={styler.userImg} /><p style={styler.name}>{ques.secu_abbr}</p></Col> */}
                          <Col span="2" style={styler.Col}><img src="./assetc/BaseUser.png" style={styler.userImg} /><p style={styler.name}>{ques.secu_abbr}</p></Col>
                          <Col span="20" style={{paddingTop:'10px'}}><p style={styler.time}>{ques.question_time}</p><p><span style={styler.wen}>问：</span><span style={styler.question}>{ques.question_content}</span></p></Col>
                          <Col span="2"></Col>
                        </Row>
                      )
                    })}
                    <Pagination style={styler.Pagination} total={this.state.ques_total} pageSize={this.state.page_size} current={this.state.ques_current} onChange={this.questionHandleChange} />
                  </TabPane>

                  <TabPane tab="最新答复" key={1}>
                    {this.state.answ_data.map((answ,id) => {
                      return(
                        <div key={`box-${id}`} style={{paddingBottom:'15px',borderBottom:'1px solid #E6E6E6'}}>
                        <Row className="answ-box">
                          <Col span="2" style={styler.Col}><img src="./assetc/BaseUser.png" style={styler.userImg} /><p style={styler.name}>{answ.user_name}</p></Col>
                          <Col span="22" style={{padding:'10px'}}><p style={styler.time}>{answ.question_time}</p><p><span style={styler.wen}>问：</span><span style={styler.question}>{answ.question_content}</span></p></Col>
                        </Row>
                        <Row>
                          <Col span="2" style={styler.Col}></Col>
                          <Col span="22" style={styler.answerBox}><p><span style={styler.wen}>{answ.secu_abbr}:</span><span style={styler.question}>{answ.reply_content}</span></p><p style={styler.time}>{answ.reply_time}</p></Col>
                        </Row>
                        </div>
                      )
                      })}
                      <Pagination style={styler.Pagination} total={this.state.answ_total} pageSize={this.state.page_size} current={this.state.answ_current} onChange={this.answerhandleChange} />
                    </TabPane>
                </Tab>
              </div>
            </IceContainer>
      //     </TabPane>
      //     <TabPane tab="常用网站" key={2}>
      //     </TabPane>
      //   </Tab>
      // </div>
    );
  }
}


const styler = {
  Col:{
    textAlign:'center',
    padding:'20px 0'
  },
  Row:{
    borderRadius:'0',
    borderTop:'1px solid #f1f1f1',
    padding:'30px 30px 30px 20px'
  },
  wen:{
    color: '#8c8c8c'
  },
  question:{
    color: '#151415',
    fontWeight:'bold'
  },
  name:{
    fontSize:'12px',
    lineHeight:'0',
  },
  time:{
    color:'#8C8C8C'
  },
  userImg: {
    width: '40px',
    height: '40px',
    margin:'0 auto',
    borderRadius :'100%'
  },
  companyImgBox: {
    display:'block',
    width:'80px',
    paddingTop:'10px'
  },
  companyAnsw:{
    lineHeight:'14px',
  },
  Pagination:{
    textAlign:'center',
  },
  answerBox:{
    margin:'0',
    padding: '15px 25px',
    borderRadius:'5px',
    backgroundColor: '#F3F3F3'
  }
}